<template>
  <div class="hot-show">
    <div class="hot-show-title">
      <h3>影院热映 | <span>豆瓣热门</span></h3>
      <router-link :to="{name: 'HotMovie'}" style="color: #bbb">更多<van-icon name="arrow" /></router-link>
    </div>
    <div class="hot-show-movie">
      <van-grid :border="false">
        <van-grid-item
          v-for="item in hotShow"
          :key="item.id"
          :to="{ name: 'Detail', params: { id: item.id } }"
        >
          <template #default>
            <van-image
              :src="item.images.small"
              :style="{ width: '33vw', height: '100%' }"
            />
            <div>
              <van-rate
                :value="(item.rating.average / 10) * 5"
                :size="10"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                allow-half
              />
              <i class="rate">{{
                item.rating.average === 0 ? "暂无" : item.rating.average
              }}</i>
            </div>
            <p
              class="van-ellipsis"
              style="font-size: 12px; margin: 0; padding: 0"
            >
              {{ item.title }}
            </p>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getTags } from '@/api/home'
export default {
  name: 'hotshow',
  data () {
    return {
      hotShow: [],
      res: null,
    }
  },
  methods: {},
  computed: {},
  components: {
  },
  created () {
    getTags()
      .then((res) => {
        // console.log(res)
        this.res = res
        this.hotShow = res.subjects.slice(0, 9)
      })
      .catch(console.log)
  },
}
</script>

<style lang='less' scoped>
.hot-show {
  .hot-show-title {
    margin-top: 20px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    h3 {
      margin: 0;
      padding: 0;
      span {
        color: #ccc;
        cursor: pointer;
      }
    }
  }
  .hot-show-movie {
    &::-webkit-scrollbar {
      display: none !important;
    }
    width: 100vw;
    overflow-x: scroll;
    .van-grid {
      display: flex;
      flex-flow: row nowrap;
      width: 999px;
    }
  }
  .rate {
    margin-left: 10px;
    font-size: 10px;
    vertical-align: middle;
  }
}
</style>
